<template>
	<view class="index">
		<view class="swiper">
			<!-- 轮播图 -->
			<swiper style="width: 100%; height: 100%;" circular="ture" autoplay="ture" interval="5000"
				indicator-dots="ture">
				<swiper-item v-for="(item,index) in (indexdata[0].params)" :key="index"
					@click="ToProductDetails(item.url)">
					<image :src="imgURL + item.img" class="banner-img"></image>
				</swiper-item>
			</swiper>
			<!-- 搜索框 -->
			<view class="search">
				<view class="search-content">
					<view class="search-part">
						<view class="search-search-part" @click="ToSearch()">
							<view class="search-swiper-title">
								<swiper style="width: 100%; height: 100%;" circular="ture" autoplay="ture"
									interval="5000" vertical="ture">
									<swiper-item style="display: flex;align-items: center;margin-left: 60rpx;"
										v-for="(item,index) in swipertitle" :key="index">
										<text style="color: white;font-size: 28rpx;">{{item}}</text>
									</swiper-item>
								</swiper>
							</view>
							<view class="search-img-part">
								<image src="@/static/search.svg" mode="" class="search-img"></image>
							</view>
						</view>
					</view>
					<view class="search-area" @click="ToCity()">
						<view class="area-img-part">
							<image src="@/static/area.svg" class="area-img" mode=""></image>
						</view>
						<text class="city-name">{{area}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="menu">
			<view class="menu-connet">
				<view v-for="(item,index) in indexdata[1].params" :key="index" class="menu-img-for"
					@click="ToClass(item.url)">
					<view class="menu-part">
						<image :src="imgURL + item.img" class="menu-img" mode="widthFix" style="width: 90rpx;"></image>
						<view style="width: 100%;display: flex;justify-content: center;align-items: center;">
							<text
								style="text-align: center ;font-size: 28rpx;width: 76px;">{{menu_img[index].name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="iphone">
			<view class="iphone-1">
				<image :src="imgURL + indexdata[2].params[0].img" style="width: 74%; height: 90%;border-radius: 20rpx;"
					@click="ToProductDetails(indexdata[2].params[0].url)"></image>
				<image :src="imgURL + indexdata[2].params[1].img" style="width: 24%; height: 90%;border-radius: 20rpx;"
					@click="ToProductDetails(indexdata[2].params[1].url)"></image>
			</view>
			<view class="iphone-2">
				<image :src="imgURL + indexdata[2].params[2].img" style="width: 23%; height: 90%;border-radius: 20rpx;"
					@click="ToProductDetails(indexdata[2].params[2].url)"></image>
				<image :src="imgURL + indexdata[2].params[3].img" style="width: 23%; height: 90%;border-radius: 20rpx;"
					@click="ToProductDetails(indexdata[2].params[3].url)"></image>
				<image :src="imgURL + indexdata[2].params[4].img" style="width: 23%; height: 90%;border-radius: 20rpx;"
					@click="ToProductDetails(indexdata[2].params[4].url)"></image>
				<image :src="imgURL + indexdata[2].params[5].img" style="width: 23%; height: 90%;border-radius: 20rpx;"
					@click="ToProductDetails(indexdata[2].params[5].url)"></image>
			</view>
			<view class="iphone-swiper">
				<view class="iphone-swiper-part">
					<swiper style="width: 100%; height: 100%;" circular="ture" autoplay="ture" interval="5000"
						indicator-dots="ture">
						<swiper-item v-for="(item,index) in indexdata[3].params" :key="index"
							@click="ToProductDetails(item.url)">
							<image :src="imgURL + item.img" style="border-radius: 20rpx;" class="banner-img-02"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="esle-ElectronicProduct">
				<view class="esle-ElectronicProduct-part-A">
					<image :src="imgURL + indexdata[4].params[0].img"
						style="width: 340rpx;height: 460rpx;border-radius: 20rpx;"
						@click="ToProductDetails( indexdata[4].params[0].url)"></image>
				</view>
				<view class="esle-ElectronicProduct-part-B">
					<view class="esle-ElectronicProduct-part-B-1" style="margin-bottom: 10rpx;">
						<view class="esle-ElectronicProduct-part-B-1-img">
							<image :src="imgURL + indexdata[4].params[1].img" mode="widthFix"
								style="width: 100%;height: 100%;border-radius: 20rpx;"
								@click="ToProductDetails( indexdata[4].params[1].url)"></image>
						</view>
						<view class="esle-ElectronicProduct-part-B-1-img">
							<image :src="imgURL + indexdata[4].params[2].img" mode="widthFix"
								style="width: 100%;height: 100%;border-radius: 20rpx;"
								@click="ToProductDetails( indexdata[4].params[2].url)"></image>
						</view>
					</view>
					<view class="esle-ElectronicProduct-part-B-2">
						<image :src="imgURL + indexdata[4].params[3].img" mode="widthFix"
							style="width: 100%;height: 100%;border-radius: 20rpx;"
							@click="ToProductDetails( indexdata[4].params[3].url)"></image>
					</view>
				</view>
			</view>
			<view class="esle-ElectronicProduct">
				<view class="esle-ElectronicProduct-part-B" style="width: 49%;">
					<view class="esle-ElectronicProduct-part-B-2">
						<image :src="imgURL + indexdata[5].params[0].img" mode="widthFix"
							style="width: 100%;height: 100%;border-radius: 20rpx;"
							@click="ToProductDetails(indexdata[5].params[0].url)"></image>
					</view>
					<view class="esle-ElectronicProduct-part-B-1" style="margin-top:24rpx">
						<view class="esle-ElectronicProduct-part-B-1-img">
							<image :src="imgURL + indexdata[5].params[2].img" mode="widthFix"
								style="width: 100%;height: 100%;border-radius: 20rpx; "
								@click="ToProductDetails( indexdata[5].params[2].url)"></image>
						</view>
						<view class="esle-ElectronicProduct-part-B-1-img">
							<image :src="imgURL + indexdata[5].params[3].img" mode="widthFix"
								style="width: 100%;height: 100%;border-radius: 20rpx; "
								@click="ToProductDetails( indexdata[5].params[3].url)"></image>
						</view>
					</view>
				</view>
				<view class="esle-ElectronicProduct-part" style="width: 49%;">
					<view class="esle-ElectronicProduct-part-A" style="width: 96%">
						<image :src="imgURL + indexdata[5].params[1].img" mode="widthFix"
							style="width: 100%;height: 100%;border-radius: 20rpx;"
							@click="ToProductDetails( indexdata[5].params[3].url)"></image>
					</view>
				</view>
			</view>
			<view class="pc">
				<view class="pc-part">
					<view class="pc-part-A">
						<image :src="imgURL + indexdata[6].params[0].img" style="width: 230rpx;height: 400rpx;"
							@click="ToProductDetails(indexdata[6].params[0].url)"></image>
					</view>
					<view class="pc-part-B">
						<view class="pc-part-B-1">
							<image :src="imgURL + indexdata[6].params[1].img" style="width: 100%; height: 100%;"
								@click="ToProductDetails( indexdata[6].params[1].url)"></image>
						</view>
						<view class="pc-part-B-1">
							<view class="pc-part-B-2_1">
								<image :src="imgURL + indexdata[6].params[2].img" style="width: 100%; height: 100%;"
									@click="ToProductDetails( indexdata[6].params[2].url)"></image>
							</view>
							<view class="pc-part-B-2_1">
								<image :src="imgURL + indexdata[6].params[3].img" style="width: 100%; height: 100%;"
									@click="ToProductDetails( indexdata[6].params[3].url)"></image>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>
		<view class="recommend-qvanju">
			<view class="recommend">
				<view class="recommend-part">
					<view class="recommend-part-content" v-for="(item,index) in categoryList" :key="index"
						@click="chuang(item.id)">
						<view class="recommend-part-content-text">
							<view class="recommend-part-content-text-1">
								<text class="recommend-hot"
									:class="{ titlechange : change == item.id}">{{item.name}}</text>
							</view>
							<view class="recommend-part-content-text-1" style="align-items: flex-start;">
								<view class="recommend-tips">
									<text class="recommend-tips"
										:class="{ change : change == item.id }">{{item.title}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="hot-part" v-for="(item,index) in goods" :key="index" @click="handleClick(item)">
				<GoodsList>
					<template #img>
						<image :src="imgURL2 + item.imgurl" mode="widthFix" style="width: 72%; height: 80%;"></image>
					</template>
					<template #title>
						<text>{{item.extension_title}}</text>
					</template>
					<template #value>
						<text>{{item.min_price}}</text>
					</template>
					<template #qvan>
						<view class="goods-connet-value-right" v-show="item.dayRent_new">
							<view class="goods-connet-value-right-text">
								<text>券后￥</text>
								<text style="font-size: 24rpx;">{{item.dayRent_new}}</text>
								<text>/天</text>
							</view>
						</view>
					</template>
					<template #activity_title>
						<text>{{item.activity_title}}</text>
					</template>
					<template #label>
						<view class="goods-connet-tips-part">
							<view class="goods-connet-tips-list" style="margin-left: 0rpx;"
								v-show="(item.rent_label).indexOf('包邮') != -1">
								<text>包邮</text>
							</view>
							<view class="goods-connet-tips-list"
								style="width: 100rpx; background-color: #ffedee; color: red;"
								v-show="(item.rent_label).indexOf('可买断') != -1">
								<text>可买断</text>
							</view>
							<view class="goods-connet-tips-list" style=" background-color: #ffedee; color: red;"
								v-show="(item.rent_label).indexOf('全新') != -1">
								<text>全新</text>
							</view>
						</view>
					</template>
				</GoodsList>
			</view>
		</view>
	</view>
</template>

<script>
	import menu_img from "@/common/index/menu_img.js";
	export default {
		data() {
			return {
				page: 1,
				goods: [],
				categoryList: [],
				imgURL: this.$imgURL,
				imgURL2: this.$imgURL2,
				area: '全国',
				menu_img,
				change: 1,
				swipertitle: '',
				indexdata: '',
			}
		},
		onLoad() {
			/* 拿到首页模块图片 */
			uni.request({
				url: this.$apiUrl + 'Index/index2',
				success: (res) => {
					this.indexdata = res.data.data.data
				}
			})
			/* 拿到热门搜索 */
			uni.request({
				url: this.$apiUrl + 'Index/keywords',
				success: (res) => {
					this.swipertitle = res.data.data
				}
			})
			this.getCategoryList();
			this.getSwiperDate();
		},
		onShow(options) {
			this.getCurrentCity();
			uni.$on('selectCity', (data) => this.area = data.name);
		},
		methods: {
			getCurrentCity() {
				const city = uni.getStorageSync("currentCity") || "全国";
				this.area = city;
			},
			getSwiperDate() {
				let url = "";
				let method = "";
				uni.showLoading({
					title: "Loading"
				})
				if (this.change === 1) {
					url = this.$apiUrl + 'Goods/getGoodsList';
					method = "POST";
				} else {
					url = this.$apiUrl + "Index/indexList"
					method = "GET";
				}
				uni.request({
					url,
					method,
					data: {
						page: this.page,
						pageSize: 10,
						cateId: this.change,
					},
					success: (res) => {
						this.page++;
						this.goods = [...this.goods, ...res.data.data.data];
					},
					complete: () => {
						uni.hideLoading();
					}
				})
			},
			getCategoryList() {
				uni.request({
					url: this.$apiUrl + 'Index/categoryList',
					success: (res) => {
						this.categoryList = res.data.data
					}
				})
			},
			handleClick(item) {
				const id = item.id ? item.id : item.goods_id;
				uni.navigateTo({
					url: '/pagesA/productDetails/productDetails?goods_id=' + id
				})
			},
			/* 切换热门推荐 || 平板电脑 */
			chuang(id) {
				this.change = id;
				this.goods = [];
				this.page = 1;
				this.getSwiperDate();
			},
			ToProductDetails(url) {
				let targetUrl = url.replace("../", "").replace('/?', '?');
				console.log(targetUrl);
				uni.navigateTo({
					url: '/pagesA/' + targetUrl
				})
			},
			ToCity() {
				uni.getLocation({
					success: (res) => {
						console.log(res);
						this.area = res.city
					}
				})
				uni.navigateTo({
					url: '/pagesA/city/city'
				});
			},
			ToGoods: function() {
				uni.navigateTo({
					url: '/pagesA/productDetails/productDetails'
				})
			},
			ToSearch() {
				uni.navigateTo({
					url: '/pagesA/search/search'
				})
			},
			ToClass(url) {
				const id = url.split("?")[1].split("=")[1]
				setTimeout(() => {
					uni.$emit('class', {
						id
					})
				}, 300)

				uni.switchTab({
					url: '/pages/class/class'
				})
			}
		},
		onReachBottom() {
			if (this.page == 4) return;
			this.getSwiperDate();
		},
		onShareAppMessage() {
			return {
				title: '挺想租 | 租好物分享新生活 首页',
				path: this.$mp.page.route,
				imageUrl: '/logo.jpg',
			}
		},
	}
</script>
<style>
	page {
		height: 100%;
		background-color: white;
		margin: 0;
		padding: 0;
	}

	.city-name {
		color: white;
		margin-left: 10rpx;
		font-size: 28rpx;
		white-space: nowrap;
		width: 90rpx;
		padding-right: 10rpx;
		overflow: hidden;
	}

	.index {
		width: 100%;
		height: 100%;
	}

	.swiper {
		width: 100%;
		height: 280px;
	}

	.banner-img {
		width: 100%;
		height: 600rpx;
		transform: translateY(-64rpx);
	}

	.banner-img-02 {
		width: 100%;
		height: 100%;
	}

	.search {
		z-index: 999;
		position: fixed;
		width: 100%;
		height: 80rpx;
		top: 20rpx;
	}

	.search-content {
		margin-left: 32rpx;
		margin-right: 32rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100%;
	}

	.search-part {
		width: 80%;
		height: 64rpx;
		margin-right: 40rpx;
	}

	.search-area {
		margin: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.search-search-part {
		width: 100%;
		height: 100%;
		border-radius: 64rpx;
		background-color: rgba(47, 47, 47, 0.1);
		display: flex;
		justify-content: space-around;
	}

	.search-img {
		width: 50%;
		height: 50%;
	}

	.search-img-part {
		width: 20%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.area-img {
		width: 32rpx;
		height: 32rpx;
	}

	.search-swiper-title {
		width: 80%;
		height: 100%;
	}

	.menu {
		padding: 20rpx;
		width: 100%;
		height: 320rpx;
		box-sizing: border-box;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu-img {
		width: 140rpx;
		height: 140rpx;
	}

	.menu-part {
		width: 140rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-img-for {
		width: 20%;
		height: 150rpx;
		float: left;
	}

	.menu-connet {
		width: 800rpx;
		height: 280rpx;
	}

	.iphone {
		width: 100%;
	}

	.iphone-1 {
		width: 96%;
		height: 224rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: auto;
	}

	.iphone-2 {
		width: 96%;
		height: 180rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin: auto;
	}

	.iphone-swiper {
		width: 96%;
		height: 270rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-bottom: 20rpx;
		margin: auto;
	}

	.iphone-swiper-part {
		width: 98%;
		height: 270rpx;
	}

	.esle-ElectronicProduct {
		width: 750rpx;
		height: 480rpx;
		display: flex;
		padding: 15rpx;
		box-sizing: border-box;
		justify-content: center;
	}

	.esle-ElectronicProduct-part {
		width: 96%;
		height: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.esle-ElectronicProduct-part-A {
		width: 49%;
		height: 100%;
	}

	.esle-ElectronicProduct-part-B {
		width: 49%;
		height: 100%;

	}

	.esle-ElectronicProduct-part-B-1 {
		width: 100%;
		height: 49%;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.esle-ElectronicProduct-part-B-2 {
		width: 340rpx;
		height: 240rpx;
	}

	.esle-ElectronicProduct-part-B-1-img {
		width: 160rpx;
		height: 220rpx;
	}

	.pc {
		width: 100%;
		height: 420rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 10rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;
	}

	.pc-part {
		width: 96%;
		height: 90%;
		display: flex;
		justify-content: space-between;
	}

	.pc-part-A {
		width: 230rpx;
		height: 400rpx;
	}

	.pc-part-B {
		width: 65%;
		height: 100%;
	}

	.pc-part-B-1 {
		width: 100%;
		height: 49%;
		margin-bottom: 25rpx;
		display: flex;
		justify-content: space-between;

	}

	.pc-part-B-2_1 {
		width: 49%;
		height: 100%;
	}

	.recommend {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 40rpx 0;
	}

	.recommend-part {
		width: 96%;
		height: 100%;
		display: flex;
		margin-left: 40rpx;
		justify-content: flex-start;
	}

	.recommend-part-content {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.recommend-part-content:first-of-type {
		padding-right: 20rpx;
		border-right: 2rpx solid #cecece;
	}

	.recommend-part-content:last-of-type {
		padding-left: 20rpx;
	}

	.recommend-part-content-text {
		width: 100%;
		height: 80%;
		border-right: 4rpx solid #f4f4f4;
	}

	.recommend-part-content-text-1 {
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.recommend-hot {
		font-size: 36rpx;
		font-weight: 600;
		color: black;
	}

	.recommend-tips {
		font-size: 24rpx;
		width: 140rpx;
		height: 40rpx;
		background-color: transparent;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx;
		font-weight: 600;
		color: #8a8a8a;
	}

	.change {
		font-size: 24rpx;
		width: 140rpx;
		height: 40rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 24rpx;
		font-weight: 600;
		background-color: red;
		color: #ffffff;
	}

	.titlechange {
		color: red;
	}

	.hot-part {
		width: 46%;
		height: 520rpx;
		background-color: white;
		float: left;
		margin: 2%;
		border-radius: 24rpx;
	}

	.recommend-qvanju {
		width: 100%;
		background-color: #f7f7f7;
		position: absolute;
		padding-bottom: 20rpx;
	}

	.goods-connet-value-right {
		width: 48%;
		height: 88%;
		background-color: red;
		border-radius: 8px;
		font-size: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}

	.goods-connet-tips-part {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
</style>
